<template>
  <div class="container">
    <el-card>
      <div slot="header" class="clearfix" v-if="subject.id && subject.name">
        <el-breadcrumb
          type="flex"
          align="middle"
          justify-content="center"
          separator-class="el-icon-arrow-right"
        >
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ subject.name }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="text item">
        <el-row type="flex" justify="space-between">
          <el-col :span="20">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
                <el-form-item label="目录名称">
                    <el-input
                  v-model="formInline.tagName"
                  placeholder=""
                ></el-input>
                  </el-form-item
              >
                <el-form-item label="状态">
                    <el-select v-model="formInline.state" placeholder="请选择">
                   <el-option label="已启用" value="1"></el-option>
                        <el-option label="已禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
                <el-form-item>
                <el-button @click="remove">清除</el-button>
                        <el-button type="primary" @click="search"
                  >搜索</el-button
                >
                  </el-form-item
              >
            </el-form>
          </el-col>
          <el-col :span="4">
            <el-row
              type="flex"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="12">
                <el-link
                  @click="$router.push('/subjects/list')"
                  type="primary"
                  icon="el-icon-back"
                  class="return"
                  v-if="subject.id && subject.name"
                  >返回学科</el-link
                ></el-col
              >
              <el-col :span="12">
                <el-button
                  type="success"
                  icon="el-icon-edit"
                  @click="dialogVisible = true"
                  >新增目录</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div class="tips">
          <i class="el-icon-info"></i> <span>数据一共{{ total }}条</span>
        </div>

        <!-- 表格 -->
        <el-table
          border
          :data="list"
          highlight-current-row
          style="margin: 15px 0 30px"
        >
          <el-table-column
            width="50"
            type="index"
            :index="indexMethod"
            label="序号"
            prop="id"
          />
          <el-table-column label="所属学科" prop="subjectName" />
          <el-table-column label="标签名称" prop="tagName" />
          <el-table-column label="创建者" prop="username" />
          <el-table-column label="创建日期">
            <template #default="{ row }">
              {{ row.addDate | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="{ row }">
              <!-- {{row}} -->
              <span v-if="row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button size="small" type="text">{{
                row.state === 1 ? "启用" : "禁用"
              }}</el-button>
              <el-button
                size="small"
                type="text"
                @click="editTag(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="delTag(row.id)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          :current-page="+page"
          :page-sizes="[10, 20, 30]"
          :page-size="pagesize"
          :total="total"
          layout="prev, pager, next,sizes, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <AddTags
      ref="addTags"
      :dialogVisible.sync="dialogVisible"
      @getList="getList()"
    ></AddTags>
  </div>
</template>

<script>
import AddTags from "@/module-hmmm/components/tags-add.vue";
import { list, remove } from "@/api/hmmm/tags.js";
export default {
  name: "tags",
  components: {
    AddTags,
  },
  data() {
    return {
      formInline: {
        tagName: "",
        state: "",
        subjectID: "",
      },
      dialogVisible: false,
      list: [],
      page: 1,
      total: 0,
      pagesize: 10,
      // subjectID: '',
      tagName: "",
      // state: ''
      id: 0,
    };
  },
  created() {
    //     if(this.$route.params.id){
    // this.subjectID= this.$route.params.id||null
    // this.tagName=this.$route.params.name||null
    //     }
    this.reqGetList();
  },
  // 如果是从学科进入标签的需要默认带上学科ID作为筛选条件。
  mounted() {
    // console.log(this.$route.params.id)
  },
  computed: {
    subject() {
      return this.$route.query;
    },
  },
  methods: {
    async reqGetList() {
      // this.subjectID = this.subject.id || null
      const { data } = await list({
        page: +this.page,
        pagesize: +this.pagesize,
        subjectID: this.subject.id || null,
      });
      //  const { data } = await list(this.page, this.pagesize, this.subjectID, this.tagName, this.state)
      console.log(data);
      this.list = data.items;
      this.total = data.counts;
      this.page = data.page;
    },
    remove() {
      this.formInline= {
        tagName: "",
        state: "",
        subjectID: "",
      }
    },
    handleSizeChange(newSize) {
      console.log(`每页 ${newSize} 条`);
      this.page = 1;
      this.pagesize = newSize;
      this.reqGetList();
    },
    handleCurrentChange(newPage) {
      console.log(`当前页: ${newPage}`);
      this.page = newPage;
      this.reqGetList();
    },
    async search() {
      const { data } = await list({
        tagName: this.formInline.tagName || null,
        state: this.formInline.state || null,
      });
      this.list = data.items;
      this.total = data.counts;
      this.page = data.page;
    },
    async delTag(id) {
      const str = await this.$confirm(
        "此操作将永久删除该目录, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (str !== "confirm") return this.$message.info("已取消操作");
      const res = await remove({ id: id });
      // console.log(res);
      if (res.status === 200) this.$message.success("删除成功!");
      if (this.list.length === 1 && this.page > 1) {
        this.page--;
      }
    },
    indexMethod(index) {
      return index + 1 + this.pagesize * (this.page - 1);
    },
    getList() {
      this.reqGetList();
    },
    async editTag(row) {
      this.dialogVisible = true;
      this.$refs.addTags.title = "修改目录";
      // this.$refs.addTags.getDetail(id)
      this.$refs.addTags.form = row;
    },
  },
};
</script>

<style scoped lang='scss'>
.item {
  margin-bottom: 18px;
}
.tree-card {
  padding: 20px 20px;
  font-size: 14px;
}
.return {
  align-items: center;
}
.el-pagination {
  display: flex;
  justify-content: right;
}
.tips {
  font-size: 12px;
  color: rgba(163, 174, 189, 1);
  line-height: 34px;
  padding: 0 15px;
  border-radius: 5px;
  background: rgba(244, 244, 245, 1);
}
i {
  color: rgba(169, 163, 166, 1);
  margin-right: 10px;
  font-size: 14px;
}
</style>
